<template>
	<view class="flex grid-gap-4" @tap="openDetails()">
		<view class="avatar">
			<image :src="find.logo" lazy-load mode="" class="img"></image>
		</view>
		<view class="flex-1 flex flex-column grid-gap-2">
			<view class="flex grid-gap-2">
				<text class="h8 font-weight-500">{{ find.title }}</text>
				<view class="flex-1"></view>
			</view>
			<view class="flex flex-y-center grid-gap-1 flex-wrap"
				@tap.stop="openDetails('content')">
				<uni-icons type="location" color="var(--xl-placeholder)" size="18"></uni-icons>
				<text class="text-grey h9">{{ find.city }}</text>
				<text class="text-grey h9">{{ find.area }}</text>
				<text class="text-grey h9" v-if="find.street">{{ find.street }}</text>
			</view>
			<view class="flex grid-gap-4">
				<view class="flex flex-center grid-gap-2">
					<image src="@/static/icons/collect_num.png" mode="scaleToFill" style="width: 16px;height: 16px;" />
					<text class="text-grey">{{ find.collect_num }}</text>
				</view>
				<view class="flex flex-center grid-gap-2">
					<image src="@/static/icons/people_num.png" mode="scaleToFill" style="width: 16px;height: 16px;" />
					<text class="text-grey">{{ find.people_num }}</text>
				</view>
				<view class="flex flex-center grid-gap-2"
					@tap.stop="openDetails('comment')">
					<image src="@/static/icons/comment_num.png" mode="scaleToFill" style="width: 16px;height: 16px;" />
					<text class="text-grey">{{ find.comment_num }}</text>
				</view>
				<slot name="action"/>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
import { $page } from "@/utils";
import { ref, defineProps } from "vue";
const props = withDefaults(defineProps<{
	item: any,
}>(), {
	item: {}
});
const find = ref(props.item);
const openDetails = (nav?:string) => {
	if(!find.value.id){
		return
	}
	$page.open(`/pages/mch/details?nav=${nav}&id=${find.value.id}`)
}
</script>
<style lang="scss" scoped>
.avatar {
	position: relative;
	width: 154rpx;
	height: 154rpx;
	display: flex;
	align-items: center;

	.img {
		width: 154rpx;
		height: 154rpx;
		border-radius: 20rpx;
	}
}
</style>